<template>
  <el-form class="el-form-col" label-width="110px" :label-position="labelPosition">
    <el-row :gutter="15">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>盘库统计</span>
          </div>
          <el-row :gutter="15">
            <el-col :lg="6" :md="12">
              <el-form-item label="盘库编号:">
                <span>{{ detail.code }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="6" :md="12">
              <el-form-item label="盘点区域:">
                <span>{{ detail.inventoryDistrict }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="6" :md="12">
              <el-form-item label="创建人:">
                <span>{{ detail.founderName }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="6" :md="12">
              <el-form-item label="创建时间:">
                <span>{{ detail.foundtime | unixTimestampFilter }}</span>
              </el-form-item>
            </el-col>
            <template v-if="detail.state == '1'">
              <el-col :lg="6" :md="12">
                <el-form-item label="库存包件总数:">
                  <span class="font-red">{{ detail.realityAll }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="实际包件总数:">
                  <span class="font-red">{{ totalPackage }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="盘盈总数:">
                  <span class="font-red">{{ totalOverflow }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="盘亏总数:">
                  <span class="font-red">{{ totalLoss }}</span>
                </el-form-item>
              </el-col>
            </template>
            <template v-if="detail.state == '2'">
              <el-col :lg="6" :md="12">
                <el-form-item label="库存包件总数:">
                  <span class="font-red">{{ detail.realityAll }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="实际包件总数:">
                  <span class="font-red">{{ detail.inventoryAll }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="盘盈总数:">
                  <span class="font-red">{{ detail.inventoryYi }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12">
                <el-form-item label="盘亏总数:">
                  <span class="font-red">{{ detail.inventoryKui }}</span>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <el-form class="el-form-col" :model="model" label-position="left" ref="elForm">
            <el-row :gutter="15">
              <el-col :span="24" v-if="detail.state == '1'">
                <div class="pull-right">
                  <el-button type="primary" @click="choicePackage">添加包件</el-button>
                </div>
              </el-col>
              <el-col :span="24">
                <el-table
                  :data="model.tableData"
                  stripe
                  style="width: 100%"
                  height="600"
                >
                  <el-table-column
                    label="序号"
                    type="index"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    prop="regionName"
                    label="盘点区域">
                  </el-table-column>
                  <el-table-column
                    prop="cargoOwnerName"
                    label="所属商家">
                  </el-table-column>
                  <el-table-column
                    prop="productNo"
                    label="产品编号">
                  </el-table-column>
                  <el-table-column
                    prop="productName"
                    label="所属产品">
                  </el-table-column>
                  <el-table-column
                    prop="packageCode"
                    label="包件编号">
                  </el-table-column>
                  <el-table-column
                    prop="packageName"
                    label="包件名称">
                  </el-table-column>
                  <el-table-column
                    prop="realityNum"
                    label="库存包件数量">
                  </el-table-column>
                  <el-table-column
                    label="实际包件数量">
                    <template slot-scope="scope">
                      <el-form-item :prop="'tableData.' + scope.$index + '.inventoryNum'"
                                    :rules="[{required: true, message: '实际包件数量必填!', trigger: 'blur'},
                                    {validator: isInteger, message: '请输入正整数!', trigger: 'blur'},
                                    {validator: range, min: 0, message: '请输入正整数!', trigger: 'blur'}
                                    ]">
                        <el-input style="width: 90%" v-model="scope.row.inventoryNum"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="责任人">
                    <template slot-scope="scope">
                      <el-form-item :prop="'tableData.' + scope.$index + '.dutyManId'"
                                    :rules="[{required: true, message: '责任人必填!', trigger: 'change'}]"
                      >
                        <el-select filterable style="width: 90%" v-model="scope.row.dutyManId" placeholder="可搜索查询">
                          <el-option v-for="item of accountArr" :label="item.text" :value="item.value"
                                     :key="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="备注">
                    <template slot-scope="scope">
                      <el-form-item :prop="'tableData.' + scope.$index + '.memo'"
                                    :rules="[{max: 50, message: '最多只能输入50个字符!', trigger: 'blur'}
                                    ]">
                        <el-input style="width: 90%" v-model="scope.row.memo"></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <el-button
                        type="danger"
                        size="mini"
                        @click="del(scope.$index, scope.row)"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24" style="text-align: center;margin-top: 20px" v-if="detail.state == '1'">
                <el-button type="primary" :loading="loading" :disabled="disabled" @click="submit">提 交</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
      <PackageSelectModal
      ref="PackageSelectModal"
      :warehouseId="warehouseId"
      @addPackage="addPackage"
      :inventoryId="id"
      :visible.sync="innerVisible"
      :inventoryDistrictId="detail.inventoryDistrictId"
      >
      </PackageSelectModal>
      <registerModal ref="registerModal" :submitData="submitData" @init="init"></registerModal>
    </el-row>
  </el-form>
</template>

<script>
import {unixTimestampFilter} from '@/filters'
import {merge, copy} from '@/utils'
import PackageSelectModal from '@/views/oms/warehouse/inventory/PackageSelectModal'
import registerModal from '@/views/oms/warehouse/inventory/registerModal'
import {range, isInteger} from '@/utils/validate'
import {getAccounts} from '@/utils/selectOptions'
export default {
  name: 'warehouseInventoryRegister',
  components: {
    PackageSelectModal,
    registerModal
  },
  filters: {
    unixTimestampFilter
  },
  data() {
    return {
      labelPosition: 'left',
      id: this.$route.params.id,
      detail: {},
      model: {
        tableData: []
      },
      innerVisible: false,
      tableData: [],
      accountArr: [],
      warehouseId: '',
      loading: false,
      submitData: {},
      tableMap: new Map()
    }
  },
  created() {
    getAccounts().then(arr => {
      this.accountArr = arr || []
    })
    this.init()
  },
  computed: {
    disabled() {
      if (this.model.tableData.length) {
        return false
      } else {
        return true
      }
    },
    totalPackage() {
      if (this.model.tableData.length) {
        let num = this.totalOverflow - this.totalLoss
        return this.detail.realityAll + num
      } else {
        return this.detail.realityAll
      }
    },
    totalOverflow() {
      let num = this.computeData()
      return num.totalOverflow
    },
    totalLoss() {
      let num = this.computeData()
      return num.totalLoss
    }
  },
  methods: {
    range,
    isInteger,
    init() {
      this.model.tableData = []
      this.getDetail()
    },
    computeData() {
      let _overFlow = 0
      let _loss = 0
      let reg = /^[0-9]+[0-9]*]*$/
      this.model.tableData.forEach(item => {
        if (!reg.test(item.inventoryNum)) {
          return
        }
        let _difference = item.realityNum - item.inventoryNum
        if (_difference < 0) {
          _overFlow += Math.abs(_difference)
        } else {
          _loss += _difference
        }
      })
      return {
        totalOverflow: _overFlow,
        totalLoss: _loss
      }
    },
    del(index, data) {
      this.tableMap.delete(data.locationPackageId)
      this.model.tableData.splice(index, 1)
    },
    choicePackage() {
      this.innerVisible = true
    },
    addPackage(data) {
      let dataArr = copy(data, true)
      let arr = []
      dataArr.forEach(item => {
        if (!this.tableMap.has(item.locationPackageId)) {
          arr.push(item)
          this.tableMap.set(item.locationPackageId, item)
        }
      })
      this.model.tableData = this.model.tableData.concat(arr)
    },
    getDetail() {
      this.$ajax.get('/ms-warehouse-order/inventory/findInventoryInfo', {inventoryId: this.id}).then(response => {
        if (response.success) {
          this.detail = response.data
          this.warehouseId = this.detail.inventoryWarehouseId
        }
      })
    },
    getTableData() {
      let data = copy(this.search, true)
      data = merge(data, this.params)
      this.$ajax.table('/ms-terminal-order/user-pick-up/get-distribution-list', data).then(response => {
        let tableData = copy(response.data || [])
        this.tableData = tableData
      })
    },
    submit() {
      this.$refs.elForm.validate(res => {
        if (!res) {
          return
        }
        let data = copy(this.model.tableData, true)
        let obj = {
          inventoryItemList: []
        }
        data.forEach(item => {
          obj.inventoryItemList.push({
            itemId: item.id,
            inventoryNum: item.inventoryNum,
            dutyManId: item.dutyManId,
            memo: item.memo
          })
        })
        this.submitData.data = obj
        this.submitData.realityAll = this.detail.realityAll
        this.submitData.totalPackage = this.totalPackage
        this.submitData.totalOverflow = this.totalOverflow
        this.submitData.totalLoss = this.totalLoss
        this.$refs.registerModal.show()
      })
    }
  }
}
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 0px;
  }
</style>
